<template>
   <div>
       <el-button type="primary" @click="returnsupplier">返回</el-button>
        <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="商品名字">
                  <el-input v-model="form.nickname"></el-input>
              </el-form-item>
               <el-form-item label="商品类别">
                  <el-input v-model="form.category"></el-input>
              </el-form-item>
               <el-form-item label="商品材质">
                  <el-input v-model="form.material"></el-input>
              </el-form-item>
               <el-form-item label="适用类型">
                  <el-input v-model="form.specifications"></el-input>
              </el-form-item>
              <el-form-item label="专用">
                  <el-input v-model="form.exclusive"></el-input>
              </el-form-item>
                <el-form-item label="包装规格">
                  <el-input v-model="form.packaging"></el-input>
              </el-form-item>
              <el-form-item label="商品口味">
                  <el-input v-model="form.taste"></el-input>
              </el-form-item>
               <el-form-item label="特殊功用">
                  <el-input v-model="form.special"></el-input>
              </el-form-item>
               <el-form-item label="产地">
                  <el-input v-model="form.origin"></el-input>
              </el-form-item>
               <el-form-item label="生产日期">
                  <div class="block">
                    <el-date-picker
                      v-model="form.manufacturedate"
                      type="date"
                      placeholder="选择日期">
                    </el-date-picker>
                  </div>
              </el-form-item>
              <el-form-item label="保质期">
                  <el-input v-model="form.shelflife"></el-input>
              </el-form-item>
              <el-form-item label="特色说明">
                  <el-input v-model="form.featuresthat"></el-input>
              </el-form-item>
              <el-form-item label="价格">
                  <el-input v-model="form.price"></el-input>
              </el-form-item>
              <el-form-item label="商品图片">
                    <el-upload
                      class="avatar-uploader"
                      action="/api/supplier/upload/add"
                      :show-file-list="false"
                      :on-success="handleAvatarSuccess"
                      :before-upload="beforeAvatarUpload">
                      <img v-if="showimg" :src="showimg" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
              </el-form-item>
               <el-button type="primary" @click="addsuppliergoods">添加</el-button>
            </el-form>
   </div>
</template>


<script>
export default {
  data() {
    return {
      form: {
        nickname: "",
        category: "",
        material: "",
        specifications: "",
        exclusive: "",
        packaging: "",
        taste: "",
        Supplier: "", //存放供货商的id方便添加
        special: "",
        origin: "",
        manufacturedate: "",
        shelflife: "",
        featuresthat: "",
        price: "",
        img: ""
      },
      showimg:""
    };
  },
  methods: {
     handleAvatarSuccess(res, file) {
      this.showimg = URL.createObjectURL(file.raw); //显示图片
      this.form.img = res.data[0];  //res得到服务器返回结果
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    returnsupplier() {
      //返回
      this.$router.push({
        name: "查看货品"
      });
    },
    // 添加货品
    addsuppliergoods() {
      this.form.Supplier = this.$route.params.id;
      this.$store.dispatch("suppliergoods/addSuppliergoods", this.form);
      this.$router.push({
        name: "查看货品"
      });
    },
    // 修改货品
    uploadsuppliergoods() {
      const id = this.$route.params.id;
      this.$router.push({
        name: "修改货品",
        params: {
          id
        }
      });
    }
  }
};
</script>


<style scoped>
.el-input {
  width: 400px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
